<template>
  <custom-nav :showBackArrow="true" title="新闻列表"></custom-nav>
  <view class="page-index">
    <view class="empty-content" v-if="!data?.length" :style="pagePaddingTop">
      <u-empty mode="data" textSize="30rpx" iconSize="100" text="暂无文章数据，去看看别的吧！"></u-empty>
    </view>
    <view class="news-list" v-else :style="pagePaddingTop">
      <template v-for="item in data">
        <view class="news-item" @click="onDetail(item)">
          <view class="new-info">
            <view class="news-box">
              <view class="new-text">
                {{ item.mid_table_remark_001 || '' }}
              </view>
              <view class="new-time">
                <view class="one-time">
                  <image src="/static/news/time@2x.png"></image>
                  <view>{{ formatTime(item.mid_table_remark_004) }}</view>
                </view>
                <view class="new-view">
                  <image src="/static/news/see@2x.png"></image>
                  <view>{{item.mid_table_remark_006 || 0}}</view>
                </view>
              </view>
            </view>
          </view>
          <view class="news-avatar">
            <image :src="item.mid_table_remark_002" mode="aspectFill"></image>
          </view>
        </view>
      </template>
    </view>
  </view>
</template>


<script setup>

import {
  middleAPI
} from "@/http/apis/newsAPI.js"
import {
  onShow,
} from "@dcloudio/uni-app"
import {
  ref,
} from "vue"
import {
  getNavHeightTop
} from "@/stores/navStore.js"
import CustomNav from "@/components/custom-nav/index.vue"
const navHeightInfo = getNavHeightTop();
const pagePaddingTop = ref({
  "paddingTop": navHeightInfo.navTotalHeight + 'px'
})
const data = ref();
onShow(async () => {
  const content = await middleAPI({
    invoke_method: "public_load_middle_table_list",
    pre_db_para_middle_table_name: "public_middle_table_lite_mod_news_msg",
    type_middle_app: "10001",
    type_inner_app: "1001",
    is_online: "0",
    pre_db_para_begin_idx: 0,
    pre_db_para_length_4_list: 10,
  }).then((response) => {
    if (response.page_content.length > 0) {
      return response.page_content;
    }
    return false;
  }).catch(() => false);
  if (content?.length > 0) {
    data.value = content;
  }
})

const formatTime = (e) => {
  const date = new Date(e)
  return `${date.getFullYear()}.${date.getMonth() + 1}.${date.getDate()}`
}
const onDetail = (e) => {
  uni.navigateTo({
    url: `/pages/news/news-detail?id=${e.id_public_middle_table}`
  })
}
</script>

<style lang="less" scoped>
.page-index {
  position: relative;
  width: 100%;
  min-height: 100vh;
  background-color: #182836;

  .empty-content {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

  }

  .news-list {
    position: relative;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;

    .news-item {
      display: flex;
      align-items: center;
      width: 686rpx;
      height: 250rpx;
      background: #213343;
      border-radius: 40rpx;
      margin: 0 auto 24rpx;
      overflow: hidden;

      .new-info {
        flex: 1;
        height: 100%;
        overflow: hidden;
        display: flex;

        .news-box {
          margin-top: 36rpx;
          margin-left: 32rpx;
          margin-bottom: 36rpx;
          display: flex;
          flex-direction: column;
        }

        .new-text {
          flex: 1;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 3;
          -webkit-box-orient: vertical;
          font-size: 32rpx;
          font-family: PingFang SC;
          font-weight: 600;
          color: #FFFFFF;
        }

        .new-time {
          margin-top: 18rpx;
          font-size: 22rpx;
          height: 32rpx;
          font-family: PingFang SC;
          font-weight: 400;
          color: #FFFFFF;
          line-height: 30rpx;
          opacity: 0.7;
          display: flex;
          align-items: center;
          overflow: hidden;

          .one-time {
            display: flex;
            align-items: center;
            margin-right: 40rpx;
            view {
              margin-left: 11rpx;
            }
            image {
              width: 28rpx;
              height: 28rpx;
            }
          }
          .new-view {

            display: flex;
            align-items: center;
            view {
              margin-left: 10rpx;
            }
            image {
              width: 28rpx;
              height: 28rpx;
            }
          }
        }
      }

      .news-avatar {
        margin-left: 58rpx;
        margin-right: 32rpx;
        width: 160rpx;
        height: 186rpx;
        background: #fff;
        border-radius: 28rpx;
        overflow: hidden;

        image {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
</style>